<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="../static/js/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<div id="main" style="width: 100%;"></div>
<script type="text/javascript">
    var p_name = null;
    var p_num = null;
    var name = null;

    $(document).ready(function () {
        var websocket = null;

        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:20008/mysqlWebSocket");
        } else {
            alert('Not support websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };

        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            setMessageInnerHTML("open");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            var reslut = eval("(" + event.data + ")");
            if (reslut) {
                $.each(reslut, function (i, item) {
                    $("#main").append(item.id + "\t" + item.user_name + "\t" + item.business_email+"\r\n");
                });
            }
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("close");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            $('errorid').append(innerHTML);
        }
        //关闭连接
        function closeWebSocket() {
            websocket.close();
        }
        //发送消息
        function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }
    });


    var length = 12;//此处为动态数据的长度
    var hei = (length * 60) + 'px';//动态获取图表高度
    $("#main").css('height', hei);//动态设置图表高度
    showchart();   //图表执行
    //图表
    function showchart() {
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            title: {
                text: '',
                subtext: ''
            },
            tooltip: {
                trigger: 'item'  //悬浮提示框不显示
            },
            grid: {   //绘图区调整
                x: 150,  //左留白
                y: 10,   //上留白
                x2: 10,  //右留白
                y2: 10   //下留白
            },
            xAxis: [
                {
                    show: false,
                    type: 'value',
                    boundaryGap: [0, 0],
                    position: 'top',
                    rich: {
                        warnValue: {
                            height: 10,
                            align: 'center',
                            backgroundColor: {
                                image: "img/cocalog.png"
                            }
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    data: ['巴西'],
                    axisLine: {show: false},     //坐标轴
                    axisTick: [{    //坐标轴小标记
                        show: false
                    }],
                    axisLabel: {
                        textStyle: {
                            fontSize: '30'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '',
                    type: 'bar',
                    tooltip: {show: false},
                    barMinHeight: 30,  //最小柱高
                    barWidth: 40,  //柱宽度
                    barMaxWidth: 100,   //最大柱宽度
                    data: [23489],
                    itemStyle: {
                        normal: {    //柱状图颜色
                            color: '#ff6600',
                            label: {
                                show: true,   //显示文本
                                position: 'inside',  //数据值位置
                                textStyle: {
                                    color: '#000',
                                    fontSize: '30'
                                }
                            }
                        }
                    }
                }
            ]
        };
        window.onresize = function () {  //适应页面
            myChartContainer();
            myChart.resize();
        }
        myChart.setOption(option);
    }
</script>
</body>
</html>
